<template>
  <!--  数据可视化页面-->
  <div class="board">

    <!-- 地图 -->

    <module-map v-if="tabValue!=='monitors'||tabValue=='files'" ref="map"></module-map>
    <module-map-monitors v-else ref="mapMonitors"></module-map-monitors>
    <!-- 标题 -->
    <div class="board_header">
      <!--      <div style="width:200px;height:40px;float: left;margin-top: -30px;color: deepskyblue;position: absolute;">-->
      <!--&lt;!&ndash;        <el-button type="text" @click="back" icon="el-icon-s-home" style="font-size: 30px">返回首页</el-button>&ndash;&gt;-->
      <!--      </div>-->
      <el-button type="text" @click="back">公路边坡管控数据可视化</el-button>
    </div>
    <!-- 筛选模块 -->
    <module-filter
      :roadId.sync="roadId"
      :slopeId.sync="slopeId"
      :projectId.sync="projectId"
      :deptTreeId.sync="deptTreeId"
      @changeRoad="changeRoad">
    </module-filter>
    <!-- 各模块页面加载 ，添加Keep-alive后页面样式会丢失-->
    <keep-alive>
      <router-view  class="board_router" ref="currentPage"  @getShopCode='getShopCode'
                    @changeMap="changeMap"></router-view>
    </keep-alive>
    <module-bar :deptTreeId="deptTreeId" :roadId="roadId" :slopeId="slopeId" @changeMap="changeMap"

    ></module-bar>
  </div>
</template>

<script>
  import ModuleMap from './modules/map.vue'
  import ModuleMapMonitors from './modules/mapMonitors.vue'
  import ModuleBar from './modules/bar.vue'
  import ModuleFilter from './modules/filter.vue'
  import {
    borderBox13,
    scrollBoard,
    decoration10,
    scrollRankingBoard,
    decoration1,
    decoration12,
    loading
  } from '@jiaminghi/data-view'
  import Vue from 'vue'

  Vue.use(loading)
  Vue.use(borderBox13)
  Vue.use(scrollBoard)
  Vue.use(decoration10)
  Vue.use(scrollRankingBoard)
  Vue.use(decoration1)
  Vue.use(decoration12)

  export default {
    components: {ModuleMap, ModuleBar, ModuleFilter,ModuleMapMonitors},
    data() {
      return {
        tabNames: '',
        key: 1,
        // 选择路线
        roadId: '',
        // 选择标段
        deptTreeId: '',
        // 选择边坡
        slopeId: '',
        projectId:'',
        warningLevel: '',
        code: 0
      }
    },
    computed: {
      tabValue() {
        return this.$route.name
      }
    },
    methods: {
      getShopCode(value) {
        this.warningLevel = ''
        this.warningLevel = value
        if(this.tabValue==='monitors'){
          this.$refs.mapMonitors.refresh(this.projectId, this.warningLevel)
        }
      },
      back() {
        this.$router.replace('/')
      },
      // 路线改变 边坡改变
      changeRoad() {
        if(this.tabValue==='monitors'){
          this.$refs.mapMonitors.refresh(this.projectId, this.warningLevel)
          this.$refs.currentPage.refresh(this.projectId)
        }else {
          this.$refs.currentPage.refresh(this.deptTreeId, this.roadId, this.slopeId)

        }
      },
      changeMap(code) {
        this.code = code
        if(this.tabValue==='monitors'){
          this.$refs.mapMonitors.refresh(this.projectId, this.warningLevel)
          this.$refs.currentPage.refresh(this.projectId)
        }else {
          this.$refs.map.refresh(this.deptTreeId, this.roadId, code, this.slopeId)
        }

      },
    },
    activated() {
      // 选择路线
      this.roadId= '',
        // 选择标段
        this.deptTreeId='',
        // 选择边坡
        this.slopeId=''
      if(this.tabValue==='monitors'){
        this.changeRoad()
      }

    },
    mounted() {


    },
    // destroyed () {
    //   window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    // }
  }
</script>
<style lang="less" scoped>
  .board {
    position: relative;
    width: 100vw;
    height: calc(100% - 0px);
    overflow: hidden;

    .board_header {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      height: 6.375rem /* 102/16 */;
      background-image: url('./imgs/header.png');
      background-size: 100% 100%;
      text-align: center;
      padding-top: 1.4375rem /* 23/16 */;

      & > em, .el-button {
        font-weight: 600;
        font-size: 2.75rem /* 44/16 */;
        line-height: 3.875rem /* 62/16 */;
        background-image: -webkit-linear-gradient(bottom, rgba(130, 168, 242, 1), rgba(255, 255, 255, 1));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
</style>


<style lang="less">

  .board_page-right-d {
    width: 12.5rem /* 200/16 */;
    height: 3.125rem /* 50/16 */;
    position: absolute;
    right: -.5rem /* 8/16 */;
    top: -1rem /* 16/16 */
  }

  .board_page-left-d {
    width: 12.5rem /* 200/16 */;
    height: 3.125rem /* 50/16 */;
    position: absolute;
    left: -.5rem /* 8/16 */;
    top: -1rem /* 16/16 */
  }

  .davav_p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .color1 {
    color: #3BD5FD;
  }

  .color2 {
    color: #80FABA;
  }

  .color3 {
    color: #2BF8E3;
  }
</style>
